<template>
  <div>
    <!-- 头部 -->
    <top :f1="true" :f2="true"></top>
    <!-- 中间搜索区域 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @clear="isShow = false"
      />
    </form>
    <div v-if="isShow" style="width: 100%;">
      <van-swipe-cell v-for="item in searchList" :key="item.id">
        <van-cell :border="false" :title="item.name">
          <span slot="default"
            >商品上架时间: {{ item.ctime | dateFormat }}</span
          >
        </van-cell>
        <template slot="right">
          <van-button
            square
            text="删除"
            type="danger"
            @click="delGoods(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div v-else class="searchHistory">
      <div class="top"></div>
      <p>搜索历史</p>
      <van-icon name="delete" @click="delHistory" />
    </div>
    <div class="tagList">
      <van-tag
        size="medium"
        @click="value = item"
        v-for="item in searchHistory"
        :key="item.id"
        >{{ item }}</van-tag
      >
      <van-divider v-if="searchHistory.length === 0">暂无搜索历史</van-divider>
    </div>
    <!-- 底部 -->
    <bottom></bottom>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      searchList: [],
      isShow: false,
      // 保存搜索历史记录
      searchHistory: []
    }
  },
  created() {
    this.searchHistory = JSON.parse(
      localStorage.getItem('historysearch') || '[]'
    )
  },
  methods: {
    // 确定搜索时触发
    async onSearch() {
      if (this.value.trim().length === 0) {
        this.isShow = false
        return this.$toast('请输入搜索内容')
      }
      const { data: res } = await this.axios.get('/api/getprodlist')
      console.log(res)
      if (res.status !== 0) {
        return this.$toast('获取搜索列表失败')
      }
      this.searchList = res.message
      this.isShow = true
      if (this.searchHistory.indexOf(this.value) !== -1) {
        return
      }
      this.searchHistory = this.searchHistory.splice(0, 10)
      this.searchHistory.unshift(this.value)
      localStorage.setItem('historysearch', JSON.stringify(this.searchHistory))
    },
    // 点击取消按钮时触发
    onCancel() {
      this.isShow = false
    },
    searchChange() {
      // console.log(this.value)
      if (this.value.trim().length === 0) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    },
    // 删除记录
    delHistory() {
      this.searchHistory = []
      localStorage.setItem('historysearch', JSON.stringify(this.searchHistory))
    },
    // 删除搜索列表数据
    async delGoods(id) {
      const result = await this.$dialog
        .confirm({
          title: '警告',
          message: '是否确定永久删除该商品'
        })
        .catch(err => err)
      if (result !== 'confirm') {
        return this.$notify('已取消删除')
      }
      const { data: res } = await this.axios.get(`/api/delproduct/${id}`)
      if (res.status !== 0) {
        return this.$toast('删除商品失败')
      }
      const { data: re } = await this.axios.get('/api/getprodlist')
      this.searchList = re.message
      this.$notify({
        message: '删除成功',
        duration: 1500,
        background: 'green'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-search {
  position: relative;
  top: 40px;
}
.van-swipe-cell {
  top: 55px;
}
.searchHistory {
  position: relative;
  top: 40px;
  left: 10px;
}
.van-icon {
  position: absolute;
  top: 0;
  right: 20px;
}
.tagList {
  padding: 30px 10px;
  .van-tag {
    margin-right: 10px;
  }
  .van-divider {
    padding: 0 16px;
    color: #333333;
    border-color: #ccc;
  }
}
</style>
